.app-customer {
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #FAFAFA;

    .customer-header {
        width: 100%;
        height: 90rpx;
        box-sizing: border-box;
        padding: 30rpx;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;

        >text {
            color: #333333;
            font-weight: 500;
            font-size: 30rpx;

            &.delete-btn {
                color: #FF4757;
            }
        }
    }

    .customer-list {
        width: 100%;
        height: calc(100% - 90rpx);
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        box-sizing: border-box;
        padding: 30rpx;

        .list-wrapper {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 30rpx;

            &:last-child {
                margin-top: 30rpx;
            }

            >text {
                color: #434343;
                font-weight: 400;
                font-size: 26rpx;
            }

            .list-item {
                width: 100%;
                box-sizing: border-box;
                padding: 30rpx;
                background: linear-gradient(182deg, #E5FFF6 0%, #FFFFFF 18%, #FFFFFF 100%);
                border-radius: 16rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .item-left {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: space-between;
                    gap: 30rpx;

                    >text {
                        &:first-child {
                            color: #FF7F36;
                            font-weight: 400;
                            font-size: 30rpx;
                        }

                        &:last-child {
                            color: #B6B6B8;
                            font-weight: 400;
                            font-size: 26rpx;
                        }
                    }
                }

                >image {
                    width: 22rpx;
                    height: 36rpx;
                }

                .select-checkbox {
                    width: 48rpx;
                    height: 48rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .checkbox-inner {
                        width: 36rpx;
                        height: 36rpx;
                        border: 2rpx solid #CCCCCC;
                        border-radius: 6rpx;
                        background-color: white;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        transition: all 0.2s ease;

                        &.selected {
                            background-color: #FF7F36;
                            border-color: #FF7F36;
                        }

                        .checkmark {
                            color: white;
                            font-size: 24rpx;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
}